<template>
	<view>
		<u-tabs 
			:list="list" 
			:is-scroll="false" 
			:current="current" 
			active-color="#FF9700"
			@change="change"
		></u-tabs>
		
		<u-grid :col="3" :border="false">
			<u-grid-item 
				v-for="item in cfylist" 
				:key="item.objectId"
				v-show="item.cfytype-1===current"
				@click="handleCfy(item.objectId)"
			>
				<image class="cfy-icon" :src="item.cfyimg" mode=""></image>
				<view class="grid-text">{{item.cfyname}}</view>
			</u-grid-item>
		</u-grid>
		
		<view class="margin-top-xs bg-fff">
			<view v-if="isEmpty" class="padding-top-xl">
				<u-empty text="暂无相关岗位" mode="data"></u-empty>
			</view>
			<JobItem
				v-for="(item,index) in joblist" 
				:key="item.objectId"
				:jobdata="item"
				@myclick="handleDetail"
			/>
		</view>
	</view>
</template>

<script>
	import {getJobList,getCfy} from '../../api/job.js'
	let page=0
	export default {
		data() {
			return {
				joblist:[],
				list: [{
					name: '实习'
				}, {
					name: '兼职'
				}],
				current: 0,
				cfylist:[],  //分类数据
				condition:{  //整合条件对象
					cfytype:'1'
				},
				isEmpty:false  //控制列表为空是否显示
			};
		},
		onLoad() {
			getCfy().then(({results})=>{
				this.cfylist = results
			})
			// 加载岗位
			this.loadData()
		},
		onReachBottom() {
			this.loadData()
		},
		onPullDownRefresh() {
			console.log('下拉刷新')
			this.refresh()
		},
		methods:{
			handleDetail(){
				console.log(123);
				uni.navigateTo({
					url:'JobDetail'
				})
			},
			change(index) { //菜单切换
				this.current = index;
				this.condition.cfytype = (index+1)+'' //修改主类
				delete this.condition.cfyid  //切换主类时，移出子类
				this.refresh()
			},
			handleCfy(id){
				this.condition.cfyid = id
				this.refresh()
			},
			refresh(){  //刷新数据
				page=0
				this.joblist = []
				this.loadData()
			},
			loadData(){
				getJobList({
					page,
					condition:this.condition
				}).then(({results})=>{
					uni.stopPullDownRefresh()
					if(results.length){
						this.joblist = [
							...this.joblist,
							...results
						]
						page++
						return
					}
					this.isEmpty = !this.joblist.length
					uni.showToast({
						title:'我是有底线的~',
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.cfy-icon{
	height: 50upx;
	width: 50upx;
}
</style>
